<template>
	<view class="page">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">个人中心</block>
		</cu-custom>
		<view class="user">
			<image :src="info.img" mode='aspectFit' class="zai-logo"></image>
			<view class="position">
				{{info.position}}
			</view>
			<view class="name">
				{{info.name}}
			</view>
		</view>
		<view class="list">
			<view class="list-item" v-for="item in nav" :key="item.icon" @click="navTo(item.path)">
				<uni-icons :type="item.icon" size="24" color="#505559"></uni-icons>
				{{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					img: "../../static/logo.png",
					position: "巡检人员",
					name: "陈晓明"
				},
				nav: [{
					icon: "person",
					title: "通讯录",
					path: "mail",
				}, {
					icon: "compose",
					title: "修改密码",
					path: "password",
				}, {
					icon: "gear-filled",
					title: "系统设置",
					path: "install",
				}, {
					icon: "info-filled",
					title: "关于",
					path: "about",
				}]
			}
		},
		onLoad() {
			this.info = uni.getStorageSync("userInfo");
		},
		methods: {
			navTo(path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss">
	.list{
		margin-top: 20rpx;
		.list-item{
			height: 88rpx;
			line-height: 88rpx;
			display: flex;
			align-items: center;
			font-size: 36rpx;
			.uni-icons{
				padding: 0 44rpx;
			}
			&:hover{
				background-color: rgba($color: #3291F8, $alpha: .1);
			}
		}
	}


	.user {
		height: 400rpx;
		background-color: #3291F8;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;

		image {
			width: 200rpx;
			height: 200rpx;
		}
		.position {
			font-size: 28rpx;
		}
		
		.name {
			font-size: 40rpx;
		}
	}
</style>
